<template>
    <div class="box">
        <div class="tab">
            <div class="tab_item" :class="i==index ? 'select' : '' " v-for="(item, i) in tabList" :key="i" @click="handleClick(i)">{{ item.name }}</div>
        </div>
        <!-- 二级路由出口 -->
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-07 09:12:38  星期二
* @description   
**/

export default {
    data() {
        return {
            activeName: '',
            tabList: [
                { name: '账号基本资料'},
                { name: '菜单配置' },
                { name: '权限配置' },
                { name: '登录记录'},
                { name: '分配配置' },
            ],
            index:0,
        }
    },
    methods: {
        handleClick(i) {
            if (i == 0) {
                this.$router.push({ path: '/adminSystem/main/accountInfo' })
            } else if (i == 1) {
                this.$router.push({ path: '/adminSystem/main/treeConfig' })
            } else if (i == 2) {
                this.$router.push({ path: '/adminSystem/main/authority' })
            } else if (i == 3) {
                this.$router.push({ path: '/adminSystem/main/loginRecord' })
            } else if (i == 4) {
                this.$router.push({ path: '/adminSystem/main/division' })
            }
        }
    },
    mounted() {
        if (this.$route.name == "AccountInfo") {
            this.index = 0
        } else if (this.$route.name == "TreeConfig") {
            this.index = 1
        } else if (this.$route.name == "Authority") {
            this.index = 2
        } else if (this.$route.name == "LoginRecord") {
            this.index = 3
        } else if (this.$route.name == "Division") {
            this.index = 4
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    background: white;
    padding: 20px;

    .tab {
        display: flex;
        border-bottom: 1px solid #e4e7ed;
        margin-bottom: 20px;
        .tab_item {
            color: #333;
            margin-right: 40px;
            cursor: pointer;
            font-weight: 500;
            padding-bottom: 20px;
        }
        .select{
            color: #409EFF;
        }
    }
}
</style>